<template>
    <custom-page-box>
        <div class="container">
            <div class="top">
                <a-button
                    type="primary"
                    @click="
                        () => {
                            $router.go(-1)
                        }
                    "
                >
                    返回
                </a-button>
            </div>
            <div class="center">
                <h4 class="mode-name">案例基础信息</h4>
                <p>
                    <span>案例类目</span>
                    <span>{{ info.serviceKind }}</span>
                </p>
                <p>
                    <span>案例名称</span>
                    <span>{{ info.name }}</span>
                </p>
                <p>
                    <span>案例金额</span>
                    <span v-if="info.amount">{{ info.amount }}万元</span>
                </p>
                <div class="img-group">
                    <span>案例封面</span>
                    <div>
                        <img
                            v-for="(item, index) in imgList"
                            :key="index"
                            :src="$staticUrl + '/' + item"
                            alt=""
                            @click="imgShow(item, imgList)"
                        />
                    </div>
                </div>
                <div class="img-group">
                    <span>案例视频</span>
                    <div v-if="info.imgCoverUrl" class="imgcover" @click="previewVisible = true">
                        <img :src="$staticUrl + '/' + info.imgCoverUrl" alt="" />
                        <a-icon type="caret-right" title="播放视频" />
                    </div>
                </div>
                <p>
                    <span>案例完成时间</span>
                    <span>{{ info.finishedTime }}</span>
                </p>
                <p>
                    <span>关联服务</span>
                    <template v-if="info.services">
                        <span>{{ servicesName }}</span>
                    </template>
                </p>
                <p>
                    <span>案例地址</span>
                    <span>{{ info.address }}</span>
                </p>
            </div>
            <div class="footer">
                <h4 class="mode-name">案例正文</h4>
                <p>
                    <span>案列详情</span>
                    <span v-html="info.detail" class="detail"></span>
                </p>
                <p>
                    <span>案例标签</span>
                    <span>{{ info.label }}</span>
                </p>
            </div>
        </div>
        <a-modal
            class="videoModal"
            :visible="previewVisible"
            :footer="null"
            @cancel="handleCancel"
            width="40%"
            title="视频预览"
        >
            <video controls id="video">
                <source :src="$staticUrl + '/' + info.videoUrl" type="video/mp4" />
                <source :src="$staticUrl + '/' + info.videoUrl" type="video/ogg" />
                <source :src="$staticUrl + '/' + info.videoUrl" type="video/webm" />
                <object :data="$staticUrl + '/' + info.videoUrl">
                    <embed :src="$staticUrl + '/' + info.videoUrl" />
                </object>
            </video>
        </a-modal>
    </custom-page-box>
</template>

<script>
export default {
    data () {
        return {
            info: {
                serviceKind: '',
                name: '',
                amount: '',
                photo: '',
                videoUrl: '',
                imgCoverUrl: '',
                finishedTime: '',
                services: [],
                detail: '',
                label: ''
            },
            previewVisible: false
        }
    },
    computed: {
        imgList () {
            return this.info.photo.split(',')
        },
        servicesName () {
            return this.info.services.map(item => item.service).join(',')
        }
    },
    async created () {
        const res = await this.$ApiServer['case/getInfo']({
            id: this.$route.params.id
        })
        if (res.code === 200) {
            this.info = Object.assign({}, res.data)
        }
    },
    methods: {
        imgShow (url, urls) {
            this.$picturesModal({ url, urls })
        },
        handleCancel () {
            const videoDom = document.querySelector('#video')
            videoDom.pause()
            this.previewVisible = false
        }
    }
}
</script>

<style scoped lang="less">
.container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    .top {
        display: flex;
        flex-direction: row-reverse;
        padding: 4px 10px;
        border-radius: 4px;
    }
    .center,
    .footer {
        border-top: 10px solid #f5f5f5;
        padding-bottom: 18px;
        border-radius: 4px;
        p,
        .img-group {
            display: flex;
            margin-top: 16px;
            padding: 0 18px;
            position: relative;
            span:nth-child(1) {
                width: 120px;
                color: #999;
                font-size: 14px;
                & + span {
                    color: #333;
                    font-size: 14px;
                    flex: 1;
                }
            }
            img {
                margin-right: 8px;
                border-radius: 4px;
                margin-bottom: 8px;
            }
            div:not(.imgcover) {
                display: flex;
                flex-wrap: wrap;
                flex: 1;
            }
            .imgcover {
                width: 2rem;
                height: 1.4rem;
                position: relative;
                .anticon.anticon-caret-right {
                    color: rgb(218, 218, 218);
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 24px;
                    cursor: pointer;
                }
            }
        }
        img {
            width: 2rem;
            height: 1.4rem;
            object-fit: cover;
            cursor: pointer;
        }
        .detail {
            max-width: 700px;
            border: 1px solid #d4d4d4;
            padding: 6px;
            border-radius: 4px;
        }
    }
    .mode-name {
        padding: 18px 20px 10px;
        border-bottom: 1px solid #f3f3f3;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        color: #333;
    }
}
.videoModal {
    ::v-deep {
        #video {
            width: 100%;
            height: 400px;
        }
    }
}
</style>
